<!-- 频道编辑 -->
<template>
  <div class="channel-edit">
    <van-cell center>
      <template #title>
        <span class="channel-title">我的频道</span>
      </template>
      <van-button
        class="btn-edit"
        plain
        type="danger"
        size="mini"
        round
        @click="isEdit = !isEdit"
      >
        {{ isEdit ? "完成" : "编辑" }}
      </van-button>
    </van-cell>

    <van-grid :gutter="10" center direction="horizontal">
      <van-grid-item
        v-for="(item, index) in MyChannels"
        :key="item.id"
        :icon="isEdit && item.id !== 0 ? 'clear' : ''"
        @click="onClickChannel(item.id)"
      >
        <template #text>
          <span class="van-ellipsis" :class="{ active: index === active }">
            {{ item.name }}
          </span>
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell center>
      <template #title>
        <span class="channel-title">频道推荐</span>
      </template>
    </van-cell>
    <van-grid :gutter="10" direction="horizontal" center>
      <van-grid-item
        v-for="item in recommendChannels"
        :key="item.id"
        @click="onAdd(item)"
      >
        <template #text>
          <span class="van-ellipsis">
            {{ item.name }}
          </span>
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {
  getAllChannels,
  addUserChannel,
  deleteUserChannel,
} from "@/api/channels";
import { mapState } from "vuex";
import { setItem } from "@/utils/storage.js";
export default {
  name: "ChannelEdit",
  data() {
    return {
      allChannels: [],
      isEdit: false,
    };
  },
  props: ["MyChannels", "active"],
  methods: {
    async loadAllChannels() {
      const { data } = await getAllChannels();
      this.allChannels = data.data.channels;
    },
    async onAdd(channel) {
      this.MyChannels.push(channel);
      if (this.userInfo) {
        await addUserChannel({
          channels: [
            {
              id: channel.id,
              seq: this.MyChannels.length,
            },
          ],
        });
      } else {
        // 没有登录, 存储到本地
        setItem("user-channels", this.MyChannels);
      }
    },
    onClickChannel(id) {
      if (this.isEdit) this.deleteChannels(id);
      else this.switchChannels(id);
    },
    async deleteChannels(id) {
      const index = this.MyChannels.findIndex((item) => item.id === id);
      if (index === 0 || index === -1) return;
      if (index < this.active) this.$emit("changeActive", this.active - 1);
      this.MyChannels.splice(index, 1);

      // 数据持久化
      if (this.userInfo) {
        await deleteUserChannel(id)
      } else {
        setItem("user-channels", this.MyChannels);
      }
    },
    /* 切换频道到首页展示 */
    switchChannels(id) {
      const index = this.MyChannels.findIndex((item) => item.id === id);
      this.$emit("switch", index);
    },
  },
  computed: {
    ...mapState(["userInfo"]),
    // 推荐的频道列表
    recommendChannels() {
      // 所有频道-我的频道 = 推荐频道
      return this.allChannels.filter((item) => {
        // 取反返回布尔值
        return !this.MyChannels.find((item2) => item2.id === item.id);
      });
    },
  },
  created() {
    this.loadAllChannels();
  },
};
</script>


<style lang= "less" scoped>
.channel-edit {
  padding-top: 46px;

  .channel-title {
    font-size: 16px;
    color: #333333;
  }
  /deep/.active {
    color: red !important;
  }
  .btn-edit {
    padding: 0 15px;
  }

  /* gird按钮 */
  /deep/.van-grid-item {
    width: 80px;
    height: 48px;
    padding-top: 5px;

    .van-grid-item__content {
      background-color: rgb(243, 245, 247);
      .van-grid-item__icon {
        font-size: 15px;
        position: absolute;
        top: -4px;
        right: -4px;
        color: rgb(245, 85, 57);
        z-index: 5001;
      }
      .van-grid-item__text {
        font-size: 14px;
        margin-top: 0;
      }
      .van-ellipsis {
        font-size: 0.34rem;
        color: #646566;
      }
    }
  }
}
</style>